<template>
	<view style="padding-top: 30rpx;">
		<view class="oneLine">
			<view class="hint">类型</view>
			<picker mode="selector" :range="array" range-key="name" :value="index" @change="bindPickerChange">
				<view class="between">
					<view>{{array[index].name}}</view>
					<view>
						<uni-icons type="right" color="#999" size="18"></uni-icons>
					</view>
				</view>
			</picker>
		</view>
		<view v-if="index==1">
			<view class="oneLine">
				<view class="hint">账号</view>
				<view>
					<input placeholder="请输入账号" placeholder-style="color:#CACFDA" v-model="number" type="number" />
				</view>
			</view>
			<view class="oneLine">
				<view class="hint">收款人</view>
				<view>
					<input placeholder="请输入对应账号姓名" placeholder-style="color:#CACFDA" v-model="name" />
				</view>
			</view>
		</view>

		<view v-if="index==0">
			<view class="oneLine">
				<view class="hint">卡号归属行</view>
				<view>
					<input placeholder="请输入所属银行" placeholder-style="color:#CACFDA" v-model="cardName" />
				</view>
			</view>
			<view class="oneLine">
				<view class="hint">银行开户行</view>
				<view>
					<input placeholder="如XX银行XX市分行XX支行" placeholder-style="color:#CACFDA" v-model="subBranchName" />
				</view>
			</view>
			<view class="oneLine">
				<view class="hint">持卡人</view>
				<view>
					<input placeholder="请输入持卡人姓名" placeholder-style="color:#CACFDA" v-model="cardPeopleName" />
				</view>
			</view>
			<view class="oneLine">
				<view class="hint">卡号</view>
				<view>
					<input placeholder="请输入卡号" placeholder-style="color:#CACFDA" v-model="cardNumber" type="number" />
				</view>
			</view>
		</view>

		<view class="flex-center">
			<button class="set-btn" form-type="submit" @click="onSub">确认添加</button>
		</view>

	</view>
</template>

<script>
	import {
		setAccountNumber
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				number: '', //支付宝账户
				name: "", //支付宝名称
				cardName: '', //银行名
				cardPeopleName: '', //持卡人
				cardNumber: '', //卡号
				subBranchName: '', //所属支行
				array: [{
						value: 2,
						name: '银行卡'
					},
					{
						value: 1,
						name: '支付宝'
					},

				],
				typeName: '',
				index: 0,
			}
		},
		onLoad() {

		},
		methods: {
			onSub() {
				const {
					index,
					number,
					name,
					cardName,
					cardPeopleName,
					cardNumber,
					subBranchName
				} = this
				var cardNumber1 = cardNumber.trim()
				console.log(this.regTest(cardNumber1))
				switch (true) {
					case index == 1 && !/^1[3456789]\d{9}$/.test(number):
						this.showToast('请输入正确账号')
						break;
					case index == 1 && name == '':
						this.showToast('请输入对应账号姓名')
						break;
					case index == 0 && !cardName:
						this.showToast('请输入所属银行')
						break;
					case index == 0 && !subBranchName:
						this.showToast('请输入银行开户行')
						break;
					case index == 0 && !cardPeopleName:
						this.showToast('请输入持卡人姓名')
						break;
					case index == 0 && !this.regTest(cardNumber1):
						this.showToast('请填写正确卡号')
						break;
					default:
						this.onSetAccountNumber()
				}

			},

			regTest(num) {
				let regExp = /^([1-9]{1})(\d{15}|\d{16}|\d{17}|\d{18})$/
				return regExp.test(num)
			},
			async onSetAccountNumber() {
				const {
					index,
					number,
					cardNumber,
					cardName,
					name,
					cardPeopleName,
					subBranchName
				} = this
				
				var cardNumber1 = cardNumber.trim()
				const res = await setAccountNumber(`s=/ApiBusiness/addaccount`, {
					account: index == 1 ? number : cardNumber1,
					name: index == 1 ? '' : cardName,
					bankcarduser: index == 1 ? name : cardPeopleName,
					type: index == 1 ? '支付宝' : '银行卡',
					openbank: index == 1 ? "" : subBranchName,
				})
				const {
					status,
					data,
					msg
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					this.goBack(2000)
					// console.log(res.data)
				}
			},
			bindPickerChange(e) {
				console.log(e)
				this.typeName = this.array[e.detail.value].name
				this.index = e.detail.value
				console.log('picker发送选择改变，携带值为', e, this.index)
			},
		}
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.set-btn {
		margin-top: 160rpx;
		width: 90%;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 18rpx;
		color: #FFFFFF;
		font-weight: bold;
		background: #41644A;
	}

	input {
		height: 80rpx;
	}

	.oneLine {
		display: grid;
		grid-template-columns: 25% 75%;
		background: #fff;
		align-items: center;
		font-size: 32rpx;
		height: 90rpx;
		padding: 0 40rpx;
		border-bottom: 1px solid #F7F7F7;

		.hint {
			color: #7E8390;
		}
	}
</style>